<template>
  <div class="record-page">
    <!-- 导航栏 -->
    <!-- <nav class="navbar">
      <div class="nav-content">
        <button class="back-btn" @click="$router.go(-1)">
          <span class="back-icon">←</span>
          返回
        </button>
        <h1 class="nav-title">测评记录</h1>
        <div class="nav-placeholder"></div>
      </div>
    </nav> -->
    <div class="navbar">
      <div class="nav-back" @click="$router.go(-1)">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="nav-title">测评记录</div>
      <div class="nav-placeholder"></div>
    </div>

    <!-- 主内容区域 -->
    <div class="page-content">
      <!-- 顶部信息卡片 -->
      <div class="info-card">
        <div class="info-icon">
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M12 16V12"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M12 8H12.01"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
        <div class="info-text">
          <h3>测评记录</h3>
          <p>
            这里展示了您所有的历史测评记录，点击"查看报告"可以查看详细测评结果。
          </p>
        </div>
      </div>

      <!-- 统计卡片 -->
      <div class="stats-container">
        <div class="stat-card">
          <div class="stat-value">{{ records.length }}</div>
          <div class="stat-label">总记录数</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ recentRecordsCount }}</div>
          <div class="stat-label">最近30天</div>
        </div>
      </div>

      <!-- 记录列表区域 -->
      <div class="records-section">
        <div class="section-header">
          <h2>测评记录列表</h2>
          <div class="filter-tabs">
            <button
              :class="['filter-tab', activeFilter === 'all' ? 'active' : '']"
              @click="activeFilter = 'all'"
            >
              全部
            </button>
            <button
              :class="['filter-tab', activeFilter === 'recent' ? 'active' : '']"
              @click="activeFilter = 'recent'"
            >
              最近
            </button>
          </div>
        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <div class="loading-spinner">
            <div class="spinner-circle"></div>
          </div>
          <p>正在加载测评记录...</p>
        </div>

        <!-- 空状态 -->
        <div v-else-if="filteredRecords.length === 0" class="empty-state">
          <div class="empty-icon">
            <svg
              width="80"
              height="80"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z"
                stroke="#9CA3AF"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M14 2V8H20"
                stroke="#9CA3AF"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M16 13H8"
                stroke="#9CA3AF"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M16 17H8"
                stroke="#9CA3AF"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M10 9H9H8"
                stroke="#9CA3AF"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
          <h3>暂无测评记录</h3>
          <p>您还没有进行任何测评，快去开始第一次测评吧！</p>
          <button class="primary-btn" @click="startNewTest">开始新测评</button>
        </div>

        <!-- 记录列表 -->
        <div v-else class="records-list">
          <div
            v-for="record in filteredRecords"
            :key="record.id"
            class="record-card"
            :class="{ recent: isRecent(record.addTime) }"
          >
            <div class="card-header">
              <div class="record-badge">
                <span class="badge-icon">📊</span>
                测评记录
              </div>
              <div class="record-date">{{ formatDate(record.addTime) }}</div>
            </div>

            <div class="card-content">
              <h3 class="record-title">测评记录 #{{ record.id }}</h3>
              <p class="record-time">{{ formatTime(record.addTime) }}</p>
            </div>

            <div class="card-footer">
              <div class="record-id">ID: {{ record.id }}</div>
              <button class="view-report-btn" @click="goToReport(record.id)">
                <span>查看报告</span>
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M5 12H19"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                  <path
                    d="M12 5L19 12L12 19"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { votelogList } from "@/api/CP";

export default {
  name: "VoteLogList",
  data() {
    return {
      records: [],
      loading: true,
      activeFilter: "all",
    };
  },
  computed: {
    filteredRecords() {
      if (this.activeFilter === "all") {
        return this.records;
      } else if (this.activeFilter === "recent") {
        return this.records.filter((record) => this.isRecent(record.addTime));
      }
      return this.records;
    },
    recentRecordsCount() {
      return this.records.filter((record) => this.isRecent(record.addTime))
        .length;
    },
  },
  methods: {
    getVotelogList() {
      let data = {
        userId: localStorage.getItem("userId"),
      };
      votelogList(data)
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.records = res.data;
          }
          this.loading = false;
        })
        .catch((error) => {
          console.error("获取测评记录失败:", error);
          this.loading = false;
        });
    },
    goToReport(id) {
      // 跳转到报告页面，带上记录ID

      this.$router.push({
        path: "/CP/RecordReport",
        query: { votelogId: id },
      });
    },
    startNewTest() {
      // 开始新测评的逻辑
      this.$router.push({ name: "测评引导语" });
    },
    formatTime(timeStr) {
      if (!timeStr) return "";
      const date = new Date(timeStr.replace(/-/g, "/"));
      return date.toLocaleTimeString("zh-CN", {
        hour: "2-digit",
        minute: "2-digit",
      });
    },
    formatDate(timeStr) {
      if (!timeStr) return "";
      const date = new Date(timeStr.replace(/-/g, "/"));
      const today = new Date();
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 1);

      if (date.toDateString() === today.toDateString()) {
        return "今天";
      } else if (date.toDateString() === yesterday.toDateString()) {
        return "昨天";
      } else {
        return date.toLocaleDateString("zh-CN", {
          month: "2-digit",
          day: "2-digit",
        });
      }
    },
    isRecent(timeStr) {
      if (!timeStr) return false;
      const recordDate = new Date(timeStr.replace(/-/g, "/"));
      const thirtyDaysAgo = new Date();
      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
      return recordDate > thirtyDaysAgo;
    },
  },
  mounted() {
    this.getVotelogList();
  },
};
</script>

<style scoped>
.record-page {
  min-height: 100vh;
  max-width: 500px;
  margin: 0 auto;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
}

/* 导航栏样式 */
.navbar {
  max-width: 500px;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-back:hover {
  background: #e0e0e0;
}

.nav-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.nav-placeholder {
  width: 40px;
}
/* 主内容区域 */
.page-content {
  margin: 0 auto;
  padding: 20px;
  margin-top: 50px;
}

/* 信息卡片 */
.info-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.info-icon {
  background: linear-gradient(135deg, #2575fc 0%, #9ee3ff 100%);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-text h3 {
  margin: 0 0 8px 0;
  color: #1a202c;
  font-size: 18px;
}

.info-text p {
  margin: 0;
  color: #718096;
  font-size: 14px;
  line-height: 1.5;
}

/* 统计卡片 */
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #718096;
}

/* 记录列表区域 */
.records-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  margin: 0;
  color: #1a202c;
  font-size: 20px;
}

.filter-tabs {
  display: flex;
  background: #f7fafc;
  border-radius: 12px;
  padding: 4px;
}

.filter-tab {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #718096;
}

.filter-tab.active {
  background: white;
  color: #2d3748;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.loading-spinner {
  margin-bottom: 16px;
}

.spinner-circle {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top: 4px solid #6a11cb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-container p {
  color: #718096;
  margin: 0;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 0px 20px;
}

.empty-icon {
  margin-bottom: 20px;
}

.empty-state h3 {
  color: #2d3748;
  margin-bottom: 12px;
  font-size: 18px;
}

.empty-state p {
  color: #718096;
  max-width: 400px;
  margin: 0 auto 24px;
  line-height: 1.5;
}

.primary-btn {
  background: linear-gradient(135deg, #2575fc 0%, #9ee3ff 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(106, 17, 203, 0.3);
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(106, 17, 203, 0.4);
}

/* 记录列表 */
.records-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.record-card {
  background: #f7fafc;
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
  position: relative;
  overflow: hidden;
}

.record-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e0;
}

.record-card.recent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #6a11cb, #2575fc);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.record-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(106, 17, 203, 0.1);
  color: #6a11cb;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-icon {
  font-size: 14px;
}

.record-date {
  font-size: 14px;
  color: #718096;
}

.card-content {
  margin-bottom: 20px;
}

.record-title {
  margin: 0 0 8px 0;
  color: #2d3748;
  font-size: 16px;
  font-weight: 600;
}

.record-time {
  margin: 0;
  color: #718096;
  font-size: 14px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-id {
  font-size: 12px;
  color: #a0aec0;
  font-family: monospace;
}

.view-report-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #2575fc 0%, #9ee3ff 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.view-report-btn:hover {
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(106, 17, 203, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }

  .records-list {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .stats-container {
    grid-template-columns: 1fr 1fr;
  }

  .info-card {
    flex-direction: column;
    text-align: center;
  }

  .info-icon {
    align-self: center;
  }
}
</style>
